<!DOCTYPE html>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>风流注册</title>
<body style="background-color: #F0E68C">
<h1 style="font-size:3em;text-align:center;color: rgba(50,150,0,0.7);">风流注册</h1>
<hr>
<form style="text-align:center;" name="myForm"onsubmit="save();" method="get">
<label for="fname">用户名: </label>
    <input type="text" id="fname" placeholder="在此输入您的用户名"><br>
    <br>
    <br>
    <br>
<label for="mima">输入密码:</label>
    <input type="password" size="15" onkeyup="pwStrength(this.value)" onblur="pwStrength(this.value)" id="mima"  placeholder="输入密码">  
    密码强度:  
    <table width="217" border="1" cellspacing="0" cellpadding="1" bordercolor="#cccccc" height="23" style="display:inline">  
    <tbody><tr align="center" bgcolor="#eeeeee">  
    <td width="33%" id="strength_L">弱</td>  
    <td width="33%" id="strength_M">中</td>  
    <td width="33%" id="strength_H">强</td>  
    </tr>  
    </tbody></table>   
    <br>
    <br>
    <br>
    <label for="mima1">重复密码： </label><input type="password" id="mima1" placeholder="重新输入您的密码"> 
    </tr>  
    </tbody></table>  
    <br>
    <br>
    <br>
    <label for="email">邮箱地址：</label> <input type="text" id="email" placeholder="邮箱地址"><br>
    <br>
    <br>
    <input type=submit onclick="return jiancha();" value="我填好啦！">
    </form>
 <script>
 //听从学长的建议把所有函数整理好放在最后面。
 //这个检查密码的函数表示实在是做不来，所以只好参考别人的代码。
 function CharMode(iN)
  {  
    if (iN>=48 && iN <=57)   
    return 1;  
    if (iN>=65 && iN <=90) 
    return 2;  
    if (iN>=97 && iN <=122) 
    return 4;  
    else  
    return 8; 
  }  
  function bitTotal(num)
  {  
    modes=0;  
    for (i=0;i<4;i++)
   {  
    if (num & 1) modes++;  
    num>>>=1;  
   }  
    return modes;  
  }  
  function checkStrong(sPW)
  {  
    if (sPW.length<=4)  
    return 0;  
    Modes=0;  
    for (i=0;i<sPW.length;i++)
   {  
    Modes|=CharMode(sPW.charCodeAt(i));  
   }  
    return bitTotal(Modes);  
   }  
  function pwStrength(pwd)
  {  
    O_color="#eeeeee";  
    L_color="#FF0000";  
    M_color="#FF9900";  
    H_color="#33CC00";  
    if (pwd==null||pwd=='')
   {  
    Lcolor=Mcolor=Hcolor=O_color;  
   }  
    else
   {  
     S_level=checkStrong(pwd);  
     switch(S_level) 
   {  
     case 0:  
     Lcolor=Mcolor=Hcolor=O_color;  
     case 1:  
     Lcolor=L_color;  
     Mcolor=Hcolor=O_color;  
     break;  
     case 2:  
     Lcolor=Mcolor=M_color;  
     Hcolor=O_color;  
     break;  
     default:  
     Lcolor=Mcolor=Hcolor=H_color;  
    }  
    }  
       document.getElementById("strength_L").style.background=Lcolor;  
       document.getElementById("strength_M").style.background=Mcolor;  
       document.getElementById("strength_H").style.background=Hcolor;  
      return;  
    }
  function jiancha() {
    var x = $("#fname").val();
    if (x == null || x == "") {
        alert("需要输入用户名。");
        return false;
    }
    var a = $("#mima").val();
    if (a == null || a == "")
      {
    alert("请输入密码");
    return false;
    }
    var m = $("#mima").val();
        b = $("#mima1").val();
    if (b == null || b !== m )
  {
    alert("两次密码输入不一致");
    return false;
    }
    var x= $("#email").val();
    var atpos=x.indexOf("@");
    
    var dotpos=x.lastIndexOf(".");
    if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
    {
        alert("不是一个有效的 e-mail 地址");
        return false;
        }
    var search_site = document.getElementById("fname").value;  
        var keyname = localStorage.getItem(search_site);  
       if(keyname!==null)
       {
           alert("用户名已使用");
           return false;
    }
  }
  function save(){  
    var site = new Object;
   site.keyname = document.getElementById("fname").value;
   site.sitename = document.getElementById("email").value;  
   site.siteurl = document.getElementById("mima").value;
  var d=new Date();
    site.nowtime=d.toLocaleDateString();
    var str = JSON.stringify(site);
    localStorage.setItem(site.keyname,str);  
  window.location.href='http://ranyuesheng.gitee.io/buptsice_training_2017_2/loadin.html';
    alert("注册成功");
  }
</script>
</body>
</html>




